<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>a:{{ a }}</h4>
    <h4>b:{{ b }}</h4>
    <h4>c:{{ c }}</h4>
    <h4>d:{{ d }}</h4>
    <!-- v-bind和前面的是一样的 -->
    <child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200, updateA }" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
let a = ref(1);
let b = ref(2);
let c = ref(3);
let d = ref(4);

function updateA(value: number) {
  a.value += value;
}
</script>

<style scoped>
.father {
  background: rgb(179, 179, 179);
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
</style>
